<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>首页</title>

    <!-- Bootstrap -->
    <link href="./boots/css/bootstrap.min.css" rel="stylesheet">
    <link href="./boots/css/my.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-4"></div>
        <div class="col-xs-6 col-md-4 text-center">
            <img src="./imgs/2.jpg" class="img-circle mt20 info">
        </div>
        <div class="col-xs-6 col-md-4"></div>
    </div>  
</div>
<div class="clear"></div>
<nav class="navbar">
    <div class="container">
        <div class="row">
            <div class="collapse navbar-collapse">
                <div class="col-md-2"></div>
                <div class="col-md-8  text-center">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">HOME</a></li>
                        <li><a href="#">WORK</a></li>
                        <li><a href="#">FEATURES</a></li>
                        <li><a href="#">SERVICES</a></li>
                        <li><a href="#">ABOUT</a></li>
                        <li><a href="#">CONTACT</a></li>
                    </ul> 
                </div>
                <div class="col-md-2"></div>
            </div><!-- collapse -->
        </div>
    </div><!-- container -->
</nav> <!-- nav -->

<div class="container">
    <div class="row">
        <div class="jumbotron">
          <p class="text-center">Hi! Introducing Me. a responsive, one page portfolio template, an elegant way</p>
          <p class="text-center">to show your work.</p>
        </div> <!-- jumbotron -->
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="./imgs/banner_01.jpg" style="width:1170px;height:300px;">
                </div>
                <div class="item">
                    <img src="./imgs/banner_02.jpg" style="width:1170px;height:300px;">
                </div>
                <div class="item">
                    <img src="./imgs/banner_03.jpg" style="width:1170px;height:300px;">
                </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
        <div class="tubiao mt150"><a href=""><span class="glyphicon glyphicon-menu-down" style="margin-top:10px;"></span></a></div>
    </div> <!-- row -->
</div> <!-- container -->

<div class="container mt150">
    <div class="row">
        <div class="hengxian">  
            <div>OUR　WORK</div>  
        </div><!-- hengxian -->
    </div> <!-- row -->
</div> <!-- container -->

<div class="container">
    <div class="row">
        <div class="collapse navbar-collapse mt150">
            <div class="col-md-2"></div>
            <div class="col-md-8 text-center">
                <ul class="nav navbar-nav work">
                    <li class="active"><a href="#" style="">ALLPROJECTS</a></li>
                    <li class="mt20">|</li>
                    <li><a href="#">WEDSIGN</a></li>
                    <li class="mt20">|</li>
                    <li><a href="#">PRINT</a></li>
                    <li class="mt20">|</li>
                    <li><a href="#">PHOTOGRAPHY</a></li>
                </ul> 
            </div>
            <div class="col-md-2"></div>
        </div><!-- collapse -->
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-4 text-center">
            <a href="">
                <img src="./imgs/2.jpg" class="img-circle mt20 detail">
            </a>
        </div>
        <div class="col-xs-6 col-md-4 text-center">
            <a href="">
                <img src="./imgs/2.jpg" class="img-circle mt20 detail">
            </a>
        </div>
        <div class="col-xs-6 col-md-4 text-center">
            <a href="">
                <img src="./imgs/2.jpg" class="img-circle mt20 detail">
            </a>
        </div>
    </div>  
</div>
<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-4 text-center">
            <a href="">
                <img src="./imgs/2.jpg" class="img-circle mt50 detail">
            </a>
        </div>
        <div class="col-xs-6 col-md-4 text-center">
            <a href="">
                <img src="./imgs/2.jpg" class="img-circle mt50 detail">
            </a>
        </div>
        <div class="col-xs-6 col-md-4 text-center">
            <a href="">
                <img src="./imgs/2.jpg" class="img-circle mt50 detail">
            </a>
        </div>
    </div>  
</div>
<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-4 text-center">
            <a href="">
                <img src="./imgs/2.jpg" class="img-circle mt50 detail">
            </a>
        </div>
        <div class="col-xs-6 col-md-4 text-center">
            <a href="">
                <img src="./imgs/2.jpg" class="img-circle mt50 detail">
            </a>
        </div>
        <div class="col-xs-6 col-md-4 text-center">
            <a href="">
                <img src="./imgs/2.jpg" class="img-circle mt50 detail">
            </a>
        </div>
    </div>  
</div>

<div class="container mt50">
    <div class="row">
        <div class="tubiao"><a href=""><span class="glyphicon glyphicon-menu-down" style="margin-top:10px;"></span></a></div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="hengxian">  
            <div>SERVICES</div>  
        </div> 
    </div>
</div>

<div class="container mt150">
    <div class="row">
        <div class="jumbotron">
          <p class="text-center">Hi! Introducing Me. a responsive, one page portfolio template, an elegant way</p>
          <p class="text-center">to show your work.</p>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4 text-center">
            <img src="./imgs/2.jpg" class="img-circle mt50 detail">
            <div class="caption">
                <h3 class="text-center">PHP课程</h3>
                <p class="text-center">这个课程非常NB,非常好学,一学就会,赶快来报名这个课程非常NB,非常好学,一学就会,赶快来报名这个课程非常NB,非常好学,一学就会,赶快来报名这个课程非常NB,非常好学,一学就会,赶快来报名这个课程非常NB,非常好学,一学就会,赶快来报名....</p>
            </div>
        </div>
        <div class="col-sm-6 col-md-4 text-center">
            <img src="./imgs/2.jpg" class="img-circle mt50 detail">
            <div class="caption">
                <h3 class="text-center">PHP课程</h3>
                <p class="text-center">这个课程非常NB,非常好学,一学就会,赶快来报名这个课程非常NB,非常好学,一学就会,赶快来报名这个课程非常NB,非常好学,一学就会,赶快来报名这个课程非常NB,非常好学,一学就会,赶快来报名这个课程非常NB,非常好学,一学就会,赶快来报名....</p>
            </div>
        </div>
        <div class="col-sm-6 col-md-4 text-center">
            <img src="./imgs/2.jpg" class="img-circle mt50 detail">
            <div class="caption">
                <h3 class="text-center">PHP课程</h3>
                <p class="text-center">这个课程非常NB,非常好学,一学就会,赶快来报名这个课程非常NB,非常好学,一学就会,赶快来报名这个课程非常NB,非常好学,一学就会,赶快来报名这个课程非常NB,非常好学,一学就会,赶快来报名这个课程非常NB,非常好学,一学就会,赶快来报名....</p>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4 text-center">
            <img src="./imgs/2.jpg" class="img-circle mt50 detail">
            <div class="caption">
                <h3 class="text-center">PHP课程</h3>
                <p class="text-center">这个课程非常NB,非常好学,一学就会,赶快来报名这个课程非常NB,非常好学,一学就会,赶快来报名这个课程非常NB,非常好学,一学就会,赶快来报名这个课程非常NB,非常好学,一学就会,赶快来报名这个课程非常NB,非常好学,一学就会,赶快来报名....</p>
            </div>
        </div>
        <div class="col-sm-6 col-md-4 text-center">
            <img src="./imgs/2.jpg" class="img-circle mt50 detail">
            <div class="caption">
                <h3 class="text-center">PHP课程</h3>
                <p class="text-center">这个课程非常NB,非常好学,一学就会,赶快来报名这个课程非常NB,非常好学,一学就会,赶快来报名这个课程非常NB,非常好学,一学就会,赶快来报名这个课程非常NB,非常好学,一学就会,赶快来报名这个课程非常NB,非常好学,一学就会,赶快来报名....</p>
            </div>
        </div>
        <div class="col-sm-6 col-md-4 text-center">
            <img src="./imgs/2.jpg" class="img-circle mt50 detail">
            <div class="caption">
                <h3 class="text-center">PHP课程</h3>
                <p class="text-center">这个课程非常NB,非常好学,一学就会,赶快来报名这个课程非常NB,非常好学,一学就会,赶快来报名这个课程非常NB,非常好学,一学就会,赶快来报名这个课程非常NB,非常好学,一学就会,赶快来报名这个课程非常NB,非常好学,一学就会,赶快来报名....</p>
            </div>
        </div>
    </div>
</div>
<div class="container mt50">
    <div class="row">
        <div class="tubiao"><a href=""><span class="glyphicon glyphicon-menu-down" style="margin-top:10px;"></span></a></div>
    </div>
</div>

<div class="container mt50">
    <div class="row">
        <div class="hengxian">  
            <div>ABOUT　ME</div>
        </div> 
    </div>
</div>
<div class="container mt150">
    <div class="row">
        <div class="col-sm-6 col-md-12 text-center">
            <img src="./imgs/2.jpg" class="img-circle mt50 detail">
            <div class="caption">
                <h4 class="text-center">Hi! I'm Jane Doe, a freelancer web & user interface designer!</h4>
                <p class="text-center">Hi! I'm Jane Doe, a freelancer web & user interface designer!Hi! I'm Jane Doe, a freelancer web & user interface designer!Hi! I'm Jane Doe, a freelancer web & user interface designer!Hi! I'm Jane Doe, a freelancer web & user interface designer!Hi! I'm Jane Doe, a freelancer web & user interface designer!</p>
            </div>
        </div>
    </div>
</div>
<div class="container mt50">
    <div class="row">
        <div class="tubiao"><a href=""><span class="glyphicon glyphicon-menu-down" style="margin-top:10px;"></span></a></div>
    </div>
</div>
<div class="container mt50">
    <div class="row">
        <div class="hengxian">  
            <div>CONTACT</div>
        </div> 
    </div>
</div>
<div class="container mt150">
    <div class="row">
        <div class="col-md-6">
            <form action="">
                YOUR NAME*　<input type="text" name="" value=""><br>
                <hr>
                EMAIL ADDRESS*　<input type="email" name="" value=""><br>
                <hr>
                EMAIL ADDRESS*　<br>
                <textarea name="" id="" cols="30" rows="10"></textarea>
                <hr>
                <div class="tubiao fl"><a href=""><span class="mt">GO</span></a></div>
            </form>

        </div>
        <div class="col-md-6">
            <div class="col-md-1"></div>
            <div class="col-md-11">
                <address>
                    skjefervndscnskjsdkjvcleafndkjsanxasnxisdhewunxznmoisaxjweiujxnsmkijsi<br>mkxnhoismxnewoisdxnewjsjxmnwsijxkewdkjx
                </address>
                <address>
                    <strong>Address: </strong>1355 Market Street, Suite 900 San Francisco, CA 94103<br>
                    <strong title="Phone">Phone: </strong> +01-000-0000<br>
                    <strong>Email: </strong>first.last@example.com
                </address>
                <div class="tubiao fl"><a href=""><span class="mt">f</span></a></div>
                <div class="tubiao fl ml"><a href=""><span class="mt">in</span></a></div>
                <div class="tubiao fl ml"><a href=""><span class="mt">s</span></a></div>
            </div>
        </div>
    </div>
</div>
<div class="container mt50">
    <div class="row">
        <div class="tubiao"><a href=""><span class="glyphicon glyphicon-menu-up" style="margin-top:10px;"></span></a></div>
    </div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="./boots/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./boots/js/bootstrap.min.js"></script>

</body>
</html>